<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3购物商品卡片设计动画特效</title>
<style>
body{
    padding: 0px;
    margin: 0px;
    background-color: black;
}
/* 第二步：开始写CSS */
.box{
    width:300px;
    margin: 300px auto;
}
/*   */
.product-grid .product-image{
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}
/* 配置图片CSS */
.product-grid .product-image img{
    width: 100%;
    height: auto;
}
/* 默认显示图片设置透明度为1，设置过渡动画 */
.product-image .pic-1{
    opacity: 1;
    backface-visibility: hidden;
    transition: all 0.4s ease-out 0s;
}
/* 鼠标悬停到图片父类DIV，默认显示的图片透明度改成0 */
.product-grid:hover .product-image .pic-1{
        opacity: 0; 
}

/* 默认隐藏的图片，透明度设置为0
并且使用scale放大三倍
设置过渡动画 */
.product-image .pic-2{
    width: 100%;
    height: 100%;
    opacity: 0;
    backface-visibility: hidden;
    transform: scale(3);
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.4s ease-out 0s;
}
/* 鼠标悬停到图片父类DIV，默认隐藏的图片透明度改成1
图片大小恢复到原始尺寸，做出一个从大到小的过渡效果 */
.product-grid:hover .product-image .pic-2 {
    opacity: 1;
    transform: scale(1);
}
</style>
</head>
<body>
<!-- 第一步：把html布局写好，两张图片一张显示，一张透明度为0 -->
<div class="box">
    <div class="product-grid">
        <div class="product-image">
            <a href="#">
                <img class="pic-1" src="images/pic3.png">
                <img class="pic-2" src="images/pic2.png">
            </a>
        </div>
    </div>
</div>
</body>
</html>